<template>
<div>
    <el-row>
        <el-col :span="6">
            <el-input v-model="searchData"  placeholder="输入姓名搜索"></el-input>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="search" >搜索</el-button>
        </el-col>
        <el-button type="success"  @click="add" >添加</el-button>
    </el-row>
    <h1 style="text-align: center">经销商表</h1>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="tid"
                label="经销商ID"
                width="120">
        </el-table-column>
        <el-table-column
                fixed
                prop="tradername"
                label="用户名"
                width="150">
        </el-table-column>

        <el-table-column
                prop="realName"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码"
                width="120">
        </el-table-column>
        <el-table-column
                prop="linkman"
                label="联系人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="traderPhone"
                label="电话"
                width="160">
        </el-table-column>
        <el-table-column
                prop="traderMail"
                label="邮箱"
                width="160">
        </el-table-column>
        <el-table-column
                prop="traderStatus"
                label="状态"
                width="100">
        </el-table-column>
        <el-table-column
                prop="ps"
                label="备注"
                width="150">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index,tableData ,scope.row)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :page-size="5"
            @current-change="page"
            :total="total">
    </el-pagination>
</div>

</template>

<script>
    import * as row from "element-ui";
    import qs from 'qs'

    export default {
        methods: {
            add(){
                this.$router.push({
                    path: '/addTrader',
                    query:{
                        id: row.re_id
                    }
                })

            },
            handleClick(row) {
                console.log(row);
            },
            deleteRow(index, rows, row) {
                axios.get('http://localhost:8080/ocp/trader/delete?tid='+row.tid).then(function (resp) {
                    console.log(resp);
                });
            },
            edit(row) {
                this.$router.push({
                    path: '/UpdateTrader',
                    query:{
                        id: row.tid
                    }
                })
            },
            page(currentPage){
                var that = this;
                axios.get('http://localhost:8080/ocp/trader/findAll?page_num='+currentPage).then(function (resp) {
                    console.log(resp);
                    that.tableData = resp.data.rows;
                    that.total=resp.data.total;
                })
            },
            search(){
                var that = this;
                axios.get('http://192.168.3.9:8080/ocp/trader/findByName?tradername='+this.searchData).then(function (resp) {
                    console.log(resp);
                    console.log(that.tableData);
                    that.tableData = resp.data.new_staff;
                    console.log(that.tableData);
                })
            },
        },
        data() {
                return {
                    total: null,
                    searchData:'',
                    tableData: null,

                }
            },
        created () {
            var that = this;
            axios.get('http://localhost:8080/ocp/trader/findAll').then(function (resp) {
                console.log(resp);
                that.tableData = resp.data.rows;
                that.total=resp.data.total;
            })
        }
    }
</script>

<style scoped>

</style>
